<template>
  <div>
    <VForm
      v-for="item in addressMap"
      ref="formRef"
      :key="item.label"
      :model="model[item.model]"
      :fieldList="fieldList({ mailBack: item.mailBack, FormTitle: item.label })"
      :rules="item.rules"
      :options="formOption"
      :originOption="optionsData"
      :id="item.id"
    >
    </VForm>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import VForm from '@/components/Form/index.vue'
import { getCountry } from '@/api/public'

const props = defineProps({
  data: { type: Object, default: () => ({}) },
})

const formRef = ref()
const model = ref({
  collection_address: {},
  return_address: {},
  out_return_address: {},
})
const optionsData = ref({ country: [] })
const rules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  country: [{ required: true, message: '请选择国家', trigger: 'blur' }],
  province: [{ required: true, message: '请输入州/省', trigger: 'blur' }],
  city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
  district: [{ required: true, message: '请输入区县', trigger: 'blur' }],
  zip_code: [{ required: true, message: '请输入邮编', trigger: 'blur' }],
  house_number: [{ required: true, message: '请输入门牌号', trigger: 'blur' }],
  address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
}

watch(
  () => props.data,
  val => {
    const { collection_address, return_address, out_return_address } = val || {}
    model.value = {
      collection_address,
      out_return_address,
      return_address,
    }
  }
)

const addressMap = [
  {
    label: '回邮地址信息',
    rules: null,
    mailBack: true,
    model: 'return_address',
    id:'回邮地址信息'
  },
  { label: '揽收地址', rules:null, model: 'collection_address',id:'揽收地址' },
  { label: '境外退件地址', rules: null, model: 'out_return_address',id:'境外退件地址' },
]

onMounted(() => {
  getCountryData()
})

const getCountryData = async () => {
  const { data } = (await getCountry()) || {}
  optionsData.value['country'] = data
}

const publicStyle = { style: { width: '320px' } }
const fieldList = ({ mailBack = false, FormTitle }) =>
  [
    { type: 'title', label: FormTitle },
    {
      field: 'name',
      label: '名称',
      ...publicStyle,
    },
    {
      field: 'phone',
      label: '电话',
      ...publicStyle,
    },
    mailBack && { type: 'br' },
    { field: 'email', label: '邮箱', ...publicStyle },
    mailBack && {
      field: 'protocol_customer',
      label: '协议客户',
      ...publicStyle,
    },
    mailBack && { field: 'return_unit', label: '退件单位', ...publicStyle },
    { type: 'br' },
    {
      field: 'country',
      label: '国家/地区',
      type: 'select',
      originField: 'country',
      options: {
        labelKey: 'name',
        valueKey: 'country',
      },
      ...publicStyle,
    },
    { field: 'province', label: '州/省', ...publicStyle },
    { field: 'city', label: '城市', ...publicStyle },
    { field: 'district', label: '区县', ...publicStyle },
    { type: 'br' },
    { field: 'zip_code', label: '邮编', ...publicStyle },
    { field: 'house_number', label: '门牌号', ...publicStyle },
    {
      field: 'address',
      label: '详细地址',
      type: 'textarea',
      full: true,
      itemStyle: { width: '100%' },
      autosize: { minRows: 1, maxRows: 8 },
    },
  ].filter(n => !!n)

const formOption = {
  inline: true,
  labelPosition: 'top',
}

const submit = () => {
  return new Promise(async (resolve, reject) => {
    try {
      let formInfo = {}

      for (let i = 0; i < addressMap.length; i++) {
        const _formItem = await formRef.value[i].submit()
        formInfo[addressMap[i].model] = _formItem
      }

      resolve(formInfo)
    } catch (e) {
      ElMessage.warning('请检查回邮地址表单')
      console.error(e)
      reject('address')
    }
  })
}

defineExpose({ submit })
</script>
